import * as echarts from 'echarts'
import React from 'react'
/**
 * 名称：标签明细栏
 * 描述：标签明细栏
 * 调用：标签中心
 * 输入：tagStore 标签相关存储
 * 时间：20220403
 */
export default class TagRelationshipEchart extends React.Component {
  constructor(props){
    super(props)
    this.state={layout:'force'}
  }

draw = () => {
  var myChart = echarts.init(document.getElementById('tag-relationship'));
  // const speed = 200
  const {store} = this.props
  const {tagsRelationshipData} = store
  
  var tagLinks = []
  var tagNodes = []
  var tagCategories = []
  var len = tagsRelationshipData.length

  tagsRelationshipData.map((item,index)=>{
      
      let symbolSize = 0.00001
      if (item.name === "" && item.relate.length > 0){
        symbolSize = item.relate[0].weight * 100
      }
      
      tagNodes = [...tagNodes,
        {
            category:item.fromName,
            id:item.key,
            name:item.name||symbolSize.toFixed(2)+"%",
            symbolSize: symbolSize ,
            label:{show:true},
            value:symbolSize
    
        }
        
          ]
        
        item.relate.map((rItem)=>{
            tagLinks = [...tagLinks,{source:item.key,target:rItem.key}]
            
        })
        tagCategories = [...tagCategories,{name:item.fromName}]
    })
    

    


  
  
  var graph = {
      
      categories:tagCategories,
      links:tagLinks,
      nodes:tagNodes

  }
  
    // 绘制图表
    myChart.setOption({
      title: {
        text: '标签关联关系',
        subtext: 'Tag relationship',
        top: 'top',
        left: 'left'
      },
      tooltip: {},
      legend: [
        {
          // selectedMode: 'single',
          data: graph.categories.map(function (a) {
            return a.name;
          })
        }
      ],
      animationDuration: 1500,
      animationEasingUpdate: 'quinticInOut',
      toolbox: {
        show : true,
        feature : {
          myChangeLayout:{  
            show: true,  
            textAlign:'right',                       
            text: '布局',
            icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', 
            onclick:()=>{
                  if (this.state && this.state.layout === 'force'){
                    this.setState({layout:'circular'})
                  }else if (this.state && this.state.layout === 'circular'){
                    this.setState({layout:'force'})
                  }
                  
            }    
         },
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {
                show: true,
                type: 'jpg'
            }
        }
      },
      series: [
        {
          name: 'Les Miserables',
          type: 'graph',
          layout: this.state.layout,
          edgeSymbol : [ 'none', 'arrow' ],
          data: graph.nodes,
          links: graph.links,
          categories: graph.categories,
          roam: true,
          force: {
            repulsion: 1500,//相距距离
            edgeLength: [50, 200],
            gravity:0.2,
            layoutAnimation: true
          },
          label: {
            position: 'right',
            formatter: '{b}'
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          },
          emphasis: {
            focus: 'adjacency',
            lineStyle: {
              width: 10
            }
          }
        }
      ]
    });
}
componentDidUpdate(){
  this.draw ()
}
componentDidMount(){
  this.draw ()
    
}
render() {
    return (
        <div id="tag-relationship" style={{ width: '100%', height: '100vh' }}></div>
    );
}
}